<template>
  <div class="headNav">
    <div class="headNav-main">
      <div class="logo">
        <router-link to="home" tag="div">
          <div class="logo">
            <img src="../static/logo.png" alt="" />
          </div>
        </router-link>
      </div>
      <div class="centerNav">
        <router-link to="home" tag="div" class="nav-list-item active">
          <span>首页</span>
        </router-link>
        <div @click="show()" class="show" ref="showPanel">
          <span :class="{ navActive: isNavActive }">BOT中心</span>
          <a-icon type="down" :class="{ navActive: isNavActive }" />
        </div>
        <router-link to="demand" tag="div" class="nav-list-item active">
          <span :class="{ active: isactive }">定制需求</span>
        </router-link>
        <router-link to="contactUs" tag="div" class="nav-list-item active">
          <span :class="{ active: isactive }">联系我们</span>
        </router-link>
        <router-link to="document" tag="div" class="nav-list-item active">
          <span>文档中心</span>
        </router-link>
      </div>
      <div class="rightNav">
        <div class="login">
          <router-link
            to="login"
            tag="div"
            class="nav-list-item active loginMain"
          >
            <a-icon type="user" :style="{ fontSize: '16px' }" />
            <span>登录</span>
          </router-link>
          <router-link
            to="registered"
            tag="div"
            class="nav-list-item active signin"
          >
            <span>注册</span>
          </router-link>
        </div>
      </div>
    </div>
    <bot v-if="isShow" class="bot"></bot>
  </div>
</template>

<script>
import Bot from "@v/Bot.vue";
export default {
  components: { Bot },
  data() {
    return {
      isactive: false,
      isNavActive: false,
      isShow: false,
      ShowMenuList: [
        "/",
        "/home",
        "/contactUs",
        "/demand",
        "/botDetail",
        "/newsList",
        "/newsDetail",
        "/hotBot",
      ],
    };
  },
  created() {
    document.addEventListener("click", (e) => {
      if (this.$refs.showPanel) {
        let isSelf = this.$refs.showPanel.contains(e.target);
        if (!isSelf) {
          this.isShow = false;
          this.isNavActive = false;
        }
      }
    });
  },
  methods: {
    show() {
      this.isNavActive = !this.isNavActive;
      this.isShow = !this.isShow;
    },
  },

  watch: {
    $route(to, from) {
      if (this.ShowMenuList.includes(to.path)) {
        this.isNavActive = false;
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "@co/common.less";
</style>